<template>
  <div class="bar-setting">
    <el-form ref="barSetting"
             :model="setting"
             label-position="top"
             style="height:auto;">
      <el-form-item :label="$t('custom.component.gadget.barTitle')">
        <el-input v-model="setting.title"
                  :placeholder="$t('custom.component.gadget.barTitlePlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.dimension')">
        <el-select v-model="setting.valueFieldsNameMeasureX"
                   :placeholder="$t('custom.component.gadget.dimensionPlaceholder')"
                   style="width:80%;">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="setting.manyMeasure"
                     :disabled="!!setting.valueFieldsNameMeasureGroup"
                     @click.native="changeManyMeasure(setting.manyMeasure)">{{$t('custom.component.gadget.multipleMeasure')}}</el-checkbox>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.measure')">
        <el-select v-if="setting.manyMeasure"
                   v-model="setting.valueFieldsNameManyY"
                   style="width:80%;"
                   multiple
                   clearable
                   collapse-tags
                   :placeholder="$t('custom.component.gadget.measurePlaceholder')">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
        <el-select v-else
                   v-model="setting.valueFieldsNameMeasureY"
                   style="width:80%;"
                   :placeholder="$t('custom.component.gadget.measurePlaceholder')">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.measurecolor')">
        <template v-if="setting.color.length>0">
          <el-color-picker v-for="(item,index) in setting.color"
                           :key="index"
                           size="small"
                           v-model="setting.color[index]"
                           color-format="hex"
                           :predefine="predefineColors"></el-color-picker>
        </template>
        <template v-else>
          <el-color-picker size="small"
                           v-model="setting.color[0]"
                           color-format="hex"
                           :predefine="predefineColors"></el-color-picker>
        </template>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.showColumnLimit')">
        <el-input v-model="setting.showColumnLimit"
                  :placeholder="$t('custom.component.gadget.setShowColumnLimit')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.showTrendLine')">
        <el-select clearable
                   size="small"
                   :disabled="setting.valueFieldsNameMeasureGroup || setting.manyMeasure"
                   v-model="setting.showTrendLine"
                   :placeholder="$t('custom.component.gadget.placeholder')"
                   style="width:80%;">
          <el-option v-for="(item,index) in trendLineList"
                     :key="index"
                     :label="item"
                     :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.setLabelFontSize')">
        <el-input v-model="setting.labelFontSize"
                  :placeholder="$t('custom.component.gadget.setLabelFontSizePlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.setXAxisFontSize')">
        <el-input v-model="setting.xAxisFontSize"
                  :placeholder="$t('custom.component.gadget.setXAxisFontSizePlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.setgoal')">
        <el-input v-model="setting.goal"
                  :placeholder="$t('custom.component.gadget.setgoalPlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.setgoalcolor')">
        <el-color-picker size="small"
                         v-model="setting.goalcolor"
                         color-format="hex"
                         :predefine="predefineColors"></el-color-picker>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.measureLine')">
        <!-- v-if="!setting.manyMeasure" -->
        <el-select v-model="setting.valueFieldsNameMeasureL"
                   :disabled="setting.valueFieldsNameMeasureGroup"
                   style="width:80%;"
                   clearable
                   collapse-tags
                   :placeholder="$t('custom.component.gadget.measurePlaceholder')">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.dimensionGroup')">
        <el-select v-model="setting.valueFieldsNameMeasureGroup"
                   clearable
                   style="width:80%;"
                   @change="groupChange"
                   :placeholder="$t('custom.component.gadget.groupPlaceholder')">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.type')">
        <el-select v-model="setting.type"
                   :placeholder="$t('custom.component.gadget.typePlacholder')"
                   style="width:80%;">
          <el-option v-for="(item,index) in typeList"
                     :key="index"
                     :label="item"
                     :value="item"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="stacked Statistics"
                    v-if="setting.type === 'StackingColumn'">
        <el-switch v-model="setting.stackedStatistics">
        </el-switch>
      </el-form-item>
      <el-form-item label="stacked Statistics Sort"
                    v-if="setting.type === 'StackingColumn'">
        <el-select v-model="setting.stackedStatisticsSort"
                   :placeholder="$t('custom.component.gadget.typePlacholder')"
                   style="width:80%;">
          <el-option v-for="(item,index) in stackedStatisticsSortOption"
                     :key="index"
                     :label="item"
                     :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.dimensionName')">
        <el-input v-model="setting.xName"
                  :placeholder="$t('custom.component.gadget.xNamePlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.measureName')">
        <el-input v-model="setting.yName"
                  :placeholder="$t('custom.component.gadget.yNamePlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="setting.yAxisPercentage">{{$t('custom.component.gadget.yAxisPercentage')}}</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox @change="changeRightYaxis"
                     v-model="setting.showYaxisRight">{{$t('custom.component.gadget.showYaxisRight')}}</el-checkbox>
      </el-form-item>
      <el-form-item v-if="setting.showYaxisRight"
                    :label="$t('custom.component.gadget.useRightyAxis')">
        <el-select v-model="setting.useRightyAxis"
                   multiple
                   clearable
                   collapse-tags
                   :placeholder="$t('custom.component.gadget.placeholder')"
                   style="width:80%;">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="setting.showYaxisRight"
                    :label="$t('custom.component.gadget.showYaxisRightLabel')">
        <el-input v-model="setting.YaxisRightLabel"
                  style="width:80%;"></el-input>
      </el-form-item>
      <!-- <el-form-item v-if="setting.showYaxisRight" :label="$t('custom.component.gadget.yAxismin')">
            <el-input v-model="setting.yAxismin" style="width:80%;"></el-input>
        </el-form-item>
        <el-form-item v-if="setting.showYaxisRight" :label="$t('custom.component.gadget.yAxismax')">
            <el-input v-model="setting.yAxismax" style="width:80%;"></el-input>
        </el-form-item> -->
      <el-form-item v-if="setting.showYaxisRight">
        <el-checkbox v-model="setting.rightyAxisPercentage">{{$t('custom.component.gadget.rightyAxisPercentage')}}</el-checkbox>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.nameLocation')">
        <el-select v-model="setting.yAxisNameLocation"
                   style="width:80%;">
          <el-option label="start"
                     value="start"></el-option>
          <el-option label="center"
                     value="center"></el-option>
          <el-option label="end"
                     value="end"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.nameGap')">
        <el-input v-model="setting.yAxisNameGap"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.yAxisnameRotate')">
        <el-input v-model="setting.yAxisnameRotate"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="setting.showlabel">{{$t('custom.component.gadget.showlabel')}}</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="setting.splitLineShow">{{$t('custom.component.gadget.splitLineShow')}}</el-checkbox>
      </el-form-item>
      <el-form-item label="Label Format">
        <quill-editor ref="myTextEditor" v-model="setting.quillContent" :options="options">
          <div id="toolbar" slot="toolbar">
            <!-- Add a bold button -->
            <button class="ql-bold">Bold</button>
            <!--            <button class="ql-italic">Italic</button>-->
            <el-popover
                popper-class="sunburst-format"
                placement="top-start"
                width="300"
                ref="popover"
                trigger="click">
              <div class="label-format">
                <div class="label-format-item" v-for="item in formatLabelList" :key="item" @click="addFormat(item)">{{item}}</div>
              </div>
              <el-button class="ql-custom-button" icon="cuifont icon_insert_token" slot="reference"></el-button>
            </el-popover>
          </div>
        </quill-editor>
      </el-form-item>
      <!-- <el-form-item :label="$t('custom.component.gadget.barGridHeight')">
        <el-input v-model="setting.gridHeight"
                  :placeholder="$t('custom.component.gadget.barGridHeightPlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.barGridTop')">
        <el-input v-model="setting.gridTop"
                  :placeholder="$t('custom.component.gadget.barGridTopPlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item> -->

    </el-form>
  </div>
</template>

<script>
import Index from '../../dashboard-filter/index.vue'
export default {
  name: 'BarSetting',
  components: { Index },
  data () {
    return {
      dataSource: [],
      // typeList: ['StackingColumn', 'Column', 'Bar'],
      options: {
        modules: {
          toolbar: '#toolbar'
        }
      },
      defaultColor: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      formatLabel: ['{x_value}', '{x_value2}', '{y_value}', '{y_value2}', '{measure_name}'],
      setting: {
        stackedStatistics: false,
        stackedStatisticsSort: 'descending',
        showColumnLimit: null,
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        goalcolor: '#5470c6',
        goal: '',
        labelFontSize: '',
        xAxisFontSize: '12',
        title: '',
        type: 'StackingColumn', // Column -- many bar // StackingColumn -- Stacking bar //Bar StackingColumn  // Bar --Bar
        gridHeight: '85%',
        gridTop: '11%',
        valueFieldsNameMeasureX: 'x',
        valueFieldsNameMeasureY: 'y',
        valueFieldsNameMeasureL: '',
        valueFieldsNameMeasureGroup: null,
        valueFieldsNameManyY: [],
        manyMeasure: false,
        xName: '',
        yName: '',
        drillThroughStatus: true,
        primaryXAxis: {
          valueType: 'Category',
          interval: 1,
          labelIntersectAction: 'Rotate45',
          labelPosition: 'Outside',
          majorGridLines: { width: 0 },
          minorGridLines: { width: 0 },
          majorTickLines: { width: 0 },
          minorTickLines: { width: 0 }
        },
        primaryYAxis: {
          majorGridLines: { width: 0 },
          majorTickLines: { width: 0 },
          minorGridLines: { width: 1 },
          minorTickLines: { width: 0 },
          lineStyle: { width: 0 },
          labelStyle: { color: 'transparent' }
        },
        chartArea: {
          border: {
            width: 0
          }
        },
        zoomSettings: {
          mode: 'X',
          enableMouseWheelZooming: false,
          enablePinchZooming: false,
          enableSelectionZooming: false,
          enableScrollbar: false
        },
        width: '100%',
        marker: {
          dataLabel: {
            visible: true,
            position: 'Top',
            font: {
              fontWeight: '600',
              color: '#ffffff'
            }
          }
        },
        tooltip: {
          enable: true
        },
        headerTitle: '',
        headerDescription: '',
        showTrendLine: '',
        yAxisPercentage: false,
        showYaxisRight: false,
        YaxisRightLabel: '',
        yAxismax: 1,
        yAxismin: 0,
        rightyAxisPercentage: false,
        useRightyAxis: [],
        yAxisNameLocation: 'end',
        yAxisNameGap: 10,
        yAxisnameRotate: 0,
        showlabel: true,
        splitLineShow: false,
        quillContent: ''
      },
      predefineColors: [
        '#ffebe6',
        '#fffae6',
        '#e3fcef',
        '#e6fcff',
        '#deebff',
        '#eae6ff',
        '#ff0000',
        '#ffff00',
        '#008000'
      ],
      trendLineList: ['linear', 'exponential', 'polynomial'],
      stackedStatisticsSortOption: ['descending', 'ascending']
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
  
    'setting.valueFieldsNameManyY' (val, oldVal) {
      if(val.length === 0){
        this.$set(this.setting,'color',this.defaultColor)
      } else {
        if (val.length > oldVal.length && val.length > this.defaultColor.length) {
        let tempColor = this.defaultColor[Math.floor(Math.random() * this.defaultColor.length)]
        this.setting.color.push(tempColor)
        }
      }
    },
    'setting.valueFieldsNameMeasureGroup' (val) {
      if (val) {
        this.setting.showTrendLine = ''
      }
    },
    'setting.manyMeasure' (val) {
      if (val) {
        this.setting.showTrendLine = ''
      }
    }
  },
  computed: {
    typeList () {
      let temp = []
      if (this.setting.valueFieldsNameMeasureGroup) {
        temp = ['StackingColumn', 'Column']
      } else {
        temp = ['StackingColumn', 'Column', 'Bar']
      }
      return temp
    },
    formatLabelList(){
      let temp = []      
      if (Array.isArray(this.fieldsList)){
        this.fieldsList.forEach(item => {
          temp.push(`{${item.name}}`)
        })
      }
      temp = this.formatLabel.concat(temp)
      return temp 
    }
  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    addFormat (item) {
      const { quill } = this.$refs.myTextEditor
      this.$refs.popover.doClose()
      quill.insertText(quill.selection.savedRange.index, item);
      quill.setSelection(quill.selection.savedRange.index + item.length + 1)
    },
    changeRightYaxis () {
      this.setting.YaxisRightLabel = ''
      this.setting.yAxismax = 1
      this.setting.yAxismin = 0
      this.setting.useRightyAxis = []
      this.setting.rightyAxisPercentage = false
    },
    groupChange (val) {
      if (val) {
        this.setting.valueFieldsNameManyY = []
        this.setting.manyMeasure = false
        this.setting.valueFieldsNameMeasureGroup = val
      } else {
        this.setting.valueFieldsNameMeasureGroup = null
      }
      this.$forceUpdate()
    },
    changeManyMeasure (val) {
      if (val) {
        this.setting.valueFieldsNameMeasureY = ''
        this.setting.valueFieldsNameManyY = []
      } else {
        this.setting.valueFieldsNameManyY = []
      }
      this.$forceUpdate()
    },
    getData () {
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      // let temp = []
      /// this.dataSourceColumns = []
      this._.merge(this.setting, value.gadgetSetting)
      if (!this.setting.manyMeasure) {
        if (this.setting.valueFieldsNameManyY && this.setting.valueFieldsNameManyY.length > 0) {
          this.setting.manyMeasure = true
        } else {
          this.setting.manyMeasure = false
        }
      }
      // list.forEach(item => {
      //  temp.push(item.name)
      // })
      // this.dataSourceColumns = temp
      this.$emit('update:data', this.setting)
    }

  }
}
</script>

<style lang="scss">
.bar-setting {
}
</style>
